<!DOCTYPE html>
<html lang="en">

<head th:replace="~{admin/_fragments :: head(~{::title})}">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户页面</title>
    <link rel="stylesheet" href="../../static/semantics-dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css">

    <script src="../../static/js/mjs.js"></script>
    <script src="../../static/js/jquery-3.7.1.min.js"></script>
    <script src="../../static/semantics-dist/semantic.min.js"></script>

</head>


<nav  th:replace="~{_fragments ::menu(1)}" class = "ui inverted attached segment m-padded-tb-mini m-shadow-small">
    <div class="ui container m-shadow-small"  >
        <div class="ui inverted secondary stackable menu">
            <h3 class="ui teal header item">学途智助</h3>
            <a class="m-item m-mobile-hidden item"> <i class="ui home icon">  </i>首页</a>
            <a class="m-item m-mobile-hidden item"> <i class="ui idea icon">  </i>分类</a>
            <a class="m-item m-mobile-hidden item"><i class="ui tags icon">  </i>标签</a>
            <a class="m-item m-mobile-hidden item"><i class="ui clone icon">  </i>归档</a>
            <a class="m-item m-mobile-hidden item"><i class="ui info icon"></i>关于我</a>
            <div class="right item">
                <div class="ui icon inverted input">
                    <input type="text" placeholder="搜索....">
                    <i class="ui search icon"></i>

                </div>
            </div>
        </div>

    </div>
    <a href="#" class="ui menu toggle m-mobile-show black button">
        <i class="sidebar icon m-top-right "></i>
    </a>
</nav>
<!--<div alt="" id="cz-bg-img" class="cz-bg-section cz-bg-img " th:style="'background: url(/images/anime11.png;); background-position: 50% 90px;'">-->
<!--    <div class="m-bg-class_cover" align="center" style="bottom: -180px;">-->
<!--        <p class="cz-index-title" style="transform: translateY(90px);">- EEETTTT's Blog -</p>-->
<!--        <p class="cz-index-title2" style="transform: translateY(90px);">这是一个还要加功能，还在开发的网站</p>-->
<!--    </div>-->
<!--</div>-->

<body>

<!--二级导航-->

<!--    中间内容 -->
<!---->
<br>

<br>
<input type="hidden" name="page" th:attr="value=${page == null ? 0 : page.number}">
<div  class="m-container-big  ">
    <div class="ui container">
        <div class="ui two stackable grid">


            <div class="five wide column m-padded-tb-small ">


                <div class="flex-container">

                    <div class="ui segment"  >
                        <div class="aboutmeinfo  ui segment   ">
                            <div class=" article ">
                                <div class="ui top attached segment">
                                    <div class="ui teal header" th:text="${user.nickname}">用户名</div>
                                </div>
                                <img class="ui fluid image" src="../../static/images/mio1.png" th:src="@{${user.avatar}} ">
                            </div>
                        </div>
                        <div class="ui   segment">
                            <h5 th:text="${user.slogan}">233333</h5>
                        </div>
                        <div class="ui attached segment">
                        </div>
                    </div>
                </div>
            </div>

            <div class="eleven wide column m-padded-tb-small">
                <div class="ui top   attached segment">
                    <!--                        头部-->
                    <div class="ui middle aligned two column grid">
                        <!--                            two column 要一起 不分开-->
                        <div class="  column">
                            <h3 class="ui teal header">笔记  </h3>
                        </div>

                        <div class="   right aligned column">
                            共
                            <h2 class="ui orange header m-inline-block" th:text="${page.totalElements}">14</h2>
                            篇
                        </div>

                    </div>


                    <!--content-->

                    <div class="ui attached   segment">

                        <!--                    单独文章-->
                        <div class="ui padded segment m-padded-tb-large" th:each="blog :${page.content}">
                            <div class="ui mobile reversed stackable  grid" >

                                <div class="ui eleven wide column">


                                    <div class="flex-container">
                                        <h3 class="ui header" ><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black" th:text="${blog.title}">深化单词</a></h3>
                                        <p class="m-text" th:text="|${blog.description}......|"> 深化单词理解
                                            上下文学习：将单词放入句子或短文中，理解其在具体语境中的含义和用法。并更好地理解其背后的文化和语境。
                                            词根词缀：学习词根和词缀的知识，更容易记忆和推测新单词的含义。
                                            同义词和反义词：并在写作和阅读中更灵活地运用。</p>
                                        <!--                                    引入新的参数才会让描述换行 -->
                                    </div>

                                    <div>
                                        <div class="ui grid">
                                            <div class="twelve wide column">
                                                <div class="ui mini horizontal link list">
                                                    <div class="item">
                                                        <img alt=""  class="ui avatar image"   th:src="@{${blog.user.avatar}}" > <!-- 头像 -->

                                                        <div class="content">
                                                            <a href="#" class="header" th:text="${blog.user.nickname}">长野原美绪</a> <!-- 名字 -->
                                                        </div>
                                                    </div>
                                                    <div class="item">
                                                        <i class="calendar icon" ></i> <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2024-2-15</span>
                                                    </div> <!-- 时间 -->
                                                    <div class="item">
                                                        <i class="eye icon"></i> <span th:text="${blog.views} ">55555</span>
                                                    </div> <!-- 观看数 -->

                                                </div>
                                            </div>
                                            <div class="ui right aligned middle aligned four wide  column m-padded-mini m-text-thin">
                                                <a href="#" target="_blank" class="ui teal mini basic  left pointing label"
                                                   th:href="@{'/types?page=' + ${0} + '&id=' + ${blog.type.id}}" th:text="${blog.type.name}">认知升级</a>

                                            </div>
                                        </div>
                                    </div>



                                </div>
                                <!--                                &lt;!&ndash;                        首图&ndash;&gt;-->

                                <div class="five wide column">
                                    <div class="image-wrapper">
                                        <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
                                            <img  src="../static/images/mio1.png" th:src="@{${blog.firstPicture}}"  alt="" class="ui img3to2   image">
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!--                        </div>-->
                        </div>
                    </div>
                </div>
                <!--              footer          底部-->
                <div>
                    <div class="ui attached segment"  th:if="${page.totalPages}>1">
                        <div class="ui center aligned two column grid">
<!--                            <div class="  column">-->
<!--                                <a href="#" th:href="@{'/admin/index?page='+${page.number+ 1}-1}"  th:unless="${page.first}" class="ui mini teal basic button">上一页</a>-->
<!--                            </div>-->
<!--                            <div class=" right aligned column">-->
<!--                                <a href="#" class="ui teal basic button" th:href="@{'/admin/index?page='+${page.number +1}}"  th:unless="${page.last}">下一页</a>-->
<!--                            </div>-->
                                只能看到这里哦

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<br>
<br>
<br>

<br>
<br>
<br>
<br>
<br>


<footer th:replace="~{admin/_fragments ::footer}" class="ui    attached segment m-padded-tb-mini m-shadow-big-up  ">


</footer>

</body>

<!--<script  src="https://cdn.jsdeliver.net/semantic-ui/2.2.4/semantic.min.js"></script>-->
<!--<script  src="https://cdn.jsdeliver.net/npm/jquery@3.2/dist/jquery.min.js"></script>-->

</html>

<script>

    $(document).ready(function() {
        $('.menu.toggle').click(function() {
            $('.m-item').toggleClass('m-mobile-hidden');
        });
    });
    $('.ui.dropdown')
        .dropdown({
            // you can use any ui transition
            // transition: 'drop',
            on:  'hover'
        })

</script>